<template>
  <view>
    <head-search-view searchHint="办公区名称搜索" @search="search"/>
    <view v-for="(item,ind) in list" :key="ind" @click="itemClick(item)">
      <item-house-view :item="item"/>
    </view>
    <no-data-view :list="list" :load-state="loadState"/>
    <uni-load-more :status="loadState"></uni-load-more>
  </view>
</template>

<script lang="ts">
import {Vue, Component} from "vue-property-decorator";
import HeadSearchView from "@/pages/components/head_search_view.vue";
import ItemHouseView from "@/pages/house/components/item_house_view.vue";
import XRouterConfig from "@/api/XRouterConfig";
import {mixins} from "vue-class-component";
import EventConfig from "@/mixins/EventConfig";
import BaseApi from "@/api/BaseApi";
import ApiDefine from "@/api/ApiDefine";
import NoDataView from "@/pages/components/no_data_view.vue";

@Component({
  components: {
    HeadSearchView,
    ItemHouseView,
    NoDataView,
  }
})
export default class DataUseAreaView extends Vue {
  itemClick(item: any) {
    XRouterConfig.goTo('data_area_details', {
      oaid: item.oaid
    })
  }

  created() {
    this.initData();
  }

  onReachBottom() {
    this.page++;
    this.initData();
  }

  search(value: any) {
    this.page = 1;
    this.areaName = value;
    this.initData();
  }

  page = 1;
  pageRow = 10;
  areaName = ''

  
  list: any = [];
  loadState = 'more';

  async initData() {
    this.loadState = 'loading'
    let value = await BaseApi.instance().fetch(ApiDefine.USE_AREA_LIST_URL, {
      sysuserid: localStorage.getItem('userId'),
      areaName: this.areaName,
      page: this.page,
      pageRow: this.pageRow,
    })
    if (value == null) {
      return;
    }
    if (value.data ?? [].length == 0) {
      this.loadState = 'no-more'
    }
    if (this.page == 1) {
      this.list = value.data ?? []
      return;
    }
    this.list = this.list.concat(value.data);
  }
}
</script>

<style scoped>

</style>